<template>
  <a-modal v-model="visible" title="交换位置" :maskClosable="false" centered @ok="submit" width="800px">
    <a-form-model ref="form" :model="form" :rules="rules" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
      <a-form-model-item label="当前位置">
        <span v-if="currentData">
          {{ currentData.groupName }} {{ currentData.displayName }} {{ currentData.userName }}
        </span>
      </a-form-model-item>
      <a-form-model-item label="选择位置" prop="seatId">
        <a-select v-model="groupId" placeholder="选择组" style="width: 180px" @change="handleGroupChange">
          <a-select-option v-for="groupItem in arrangeGroupList" :key="groupItem.id">
            {{ groupItem.name }}
          </a-select-option>
        </a-select>
        <a-select class="_ml-16" placeholder="选择位置" v-model="form.seatId" style="width: 300px">
          <a-select-option v-for="seatItem in arrangeSeatList" :key="seatItem.id">
            {{ getSeatItemDetaile(seatItem) }}
          </a-select-option>
        </a-select>
        <a-button type="link" @click="openSeatArrangementOverview">
          查看位置视图
        </a-button>
      </a-form-model-item>
      <a-form-model-item label="换位方式" prop="changeType">
        <a-radio-group name="radioGroup" v-model="form.changeType">
          <a-radio :value="1">
            占用被选择的位置
          </a-radio>
          <a-radio :value="2">
            对换位置
          </a-radio>
        </a-radio-group>
      </a-form-model-item>
    </a-form-model>
    <SeatArrangementOverview ref="SeatArrangementOverview"></SeatArrangementOverview>
  </a-modal>
</template>

<script>
import { arrangeGroupSelect, arrangeSeatSelect } from '@/api/activity/activity'
import SeatArrangementOverview from './SeatArrangementOverview.vue'

export default {
  components: {
    SeatArrangementOverview
  },
  props: {
    // 场次ID
    activityArrangeId: {
      type: Number | String
    }
  },
  data() {
    return {
      visible: false,
      currentData: null,
      arrangeGroupList: [],
      arrangeSeatList: [],
      groupId: '',
      form: {
        changeType: 1,
        seatId: ''
      },
      rules: {
        seatId: [{ required: true, message: '请选择位置', trigger: 'submit' }]
      }
    }
  },
  mounted() {},
  methods: {
    openSeatArrangementOverview() {
      this.$refs.SeatArrangementOverview.openModel(this.activityArrangeId)
    },
    getSeatItemDetaile(seatItem) {
      if (!seatItem.userId) return `${seatItem.displayName} 空`
      if (!seatItem.userName) return `${seatItem.displayName} 已占座`
      return `${seatItem.displayName || ''} ${seatItem.userName || ''} ${seatItem.userCompanyName || ''}`
    },
    openModel(currentData) {
      this.groupId = void 0
      this.form.seatId = void 0
      this.arrangeSeatList = []
      this.currentData = currentData
      this.getArrangeGroupSelect()
      this.visible = true
    },
    getArrangeGroupSelect() {
      arrangeGroupSelect(this.activityArrangeId).then(res => {
        this.arrangeGroupList = res.data
      })
    },
    handleGroupChange(gorupId) {
      this.form.seatId = void 0
      this.getArrangeSeatSelect(gorupId)
    },
    getArrangeSeatSelect(gorupId) {
      arrangeSeatSelect(gorupId).then(res => {
        this.arrangeSeatList = res.data
      })
    },
    closeModel() {
      this.visible = false
    },
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit('submit', {
            currentSeatId: this.currentData.id,
            targetSeatId: this.form.seatId,
            changeType: this.form.changeType
          })
        }
      })
    }
  }
}
</script>

<style></style>
